<template>
	<view>
		<view class="service-conet flex p-l-10" @click="openserve">
			<image src="../../static/images/server-header.png" mode="widthFix"></image>
		</view>
		<block v-for="(item,index) in itemList" :key="index">
		<message-list v-if="item.record.length!=0"   :item="item"></message-list>
	
		</block>
		
	</view>
</template>

<script>
	import {
			mapGetters,
			mapActions
		} from 'vuex'
	import {chatLists} from "@/api/chat.js"
	export default {
		data() {
			return {
				itemList:[],
				websocketmain:null
			};
		},
		async onShow() {
		// await this.getMsgList()
		this.websocketInit()
		},
		computed:{
					...mapGetters(["userInfo"]),
					},
		methods:{
			//聊天客服
			openserve(){
				uni.navigateTo({
					url:"/bundle/pages/service_detail/service_detail"
				})
			},
			websocketInit(){
				let url = 'wss://hy.qslmkj.com:9803';
			
				this.websocketmain = uni.connectSocket({
					url,
					success:res=>{
						console.log(res)
					},
					fail:err=>{
						console.log(err)
					}
				})
				
				
				
				this.websocketmain.onOpen(res=>{
					this.openSocket = true;
					this.websocketmain.onMessage(res=>{
				       console.log(res);
						console.log("连接成功");
						this.$nextTick(async()=>{
							await this.getMsgList()
						})
					})
					let data = {
						operation_type:100,
						user_id:this.userInfo.id
					}
					let datastr = JSON.stringify(data)
					console.log(datastr)
					console.log(this.userInfo.id);
					this.websocketmain.send({
						data:datastr,
						success:res=>{
							console.log("发送加入信息");
						
							console.log(res)
						},
						fail:err=>{
							// console.log('房间创建或者加入失败，请')
							this.$toast({
								title:err
							})
						}
					})
				
				})
				
			},
			//获取信息列表
			async getMsgList(){
				let res=await chatLists()
				this.itemList=res.data.lists
			}
		},
		beforeDestroy() {
			// uni.closeSocket({})
		}
	}
</script>

<style lang="scss" scoped>
.service-conet{
	width: 114rpx;
	height: 72rpx;
	position:fixed;
	z-index: 99;
	border-radius: 40rpx 0rpx 0rpx 40rpx;
	right: 0px;
	bottom: 182rpx;
	background-color: #F9ECE6;
	image{
		width: 76rpx;
	}
}
</style>
